<template>
  <div class="Department">
    <div class="btn">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="edit">编辑</el-button>
    </div>
    <div class="DepartmentWrap clearfix">
      <!-- 左侧树 -->
      <div class="leftTree">
        <el-tree :props="defaultProps" :load="loadTree" lazy @node-click="handleNodeClick"></el-tree>
      </div>
      <!-- 右侧内容 -->
      <div class="rightContent">
        <!-- <TopFilter
                :list="formList"
                :cols="7"
                :isSubmitBtn="false"
        ></TopFilter>-->
        <FormPanel
          ref="formPanel"
          :labelWidth="130"
          :cols="1"
          :list="formList"
          formType="show"
          :isSubmitBtn="false"
        />
      </div>
    </div>
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer"
      title="新增营销素材类型"
      :width="920"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <add :rowData="materialTypeInfo" @close="infoClose" />
    </Drawer>
    <Drawer
      ref="infoDrawer2"
      :visible.sync="visibleDrawer2"
      title="修改营销素材类型 "
      :width="920"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <edit :rowData="materialTypeInfo" @close="infoClose2" />
    </Drawer>
  </div>
</template>

<script>
import { getChildOrgTreeList, getChildOrgdetail, getOrgBrand, getOrgSeries, saveOrgInfo } from '@/api/common/org/companyOrgManage';
import { tree } from '@/api/cms-api/projectOperating/definition/materialType/index';
import { dictionary } from '@/utils/dictMixin';
import add from './add';
import edit from './edit';
export default {
  name: 'Department',
  components: {
    add,
    edit
  },
  mixins: [dictionary],
  data() {
    return {
      treeLeval:'', //当前选择节点的leval
      visibleDrawer: false,
      visibleDrawer2: false,
      levelMap:{0:'0',1:'一级',2:'二级',3:'三级',4:'四级',5:'五级',6:'六级',7:'七级'},
      dataTree: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      currentNode:null,//当前节点
      currentResolve:null,//当前更新方法
      formList: this.createFormList(),
      dataSource: [],
      params: {
        parentTypeId: null
      },
      BrandData: {
        orgId: 0
      },
      SeriesData: {
        orgId: 0,
        brandId: ''
      },

      materialTypeInfo: {
        children: '',
        deleted: '',
        isSend: '',
        materialTypeCode: '',
        materialTypeId: '',
        materialTypeLevel: '',
        materialTypeName: '',
        parent: '',
        parentMaterialTypeId: '',
        parentTypeId: '',
        text: '',
        parentMaterialTypeCode: '',
        parentMaterialTypeName: '',
        parentMaterialTypeLevel: ''
      }
    };
  },
  mounted() {
  },
  methods: {
    //关闭详情(新增)
    infoClose(val, type) {
      this.visibleDrawer = false;
      this.refreshCurrentNode();
    },
    //关闭详情（修改）
    infoClose2(val, type) {
      this.visibleDrawer2 = false;
      this.updateCurrentNode();
    },
    // 新增
    add() {
      if (this.materialTypeInfo['materialTypeName'] == '') {
        this.$notify.warning({ title: '提示信息', message: '请选择有效跟节点!' });
        return;
      }
      
      if (this.treeLeval == '6') {
        this.$notify.warning({ title: '提示信息', message: '树最多为5级，不可再新增!' });
        return;
      }
      this.visibleDrawer = true;
    },
    // 新增
    edit() {
      if (this.materialTypeInfo['parentTypeId'] == null) {
        this.$notify.warning({ title: '提示信息', message: '根节点无法编辑!' });
        return;
      }
      if (this.materialTypeInfo['materialTypeName'] == '') {
        this.$notify.warning({ title: '提示信息', message: '请选择需要编辑的节点!' });
        return;
      }
      this.visibleDrawer2 = true;
    },
    initTab() {
      //赋值
      this.formList.forEach(x => {
        if(x.fieldName == 'parentMaterialTypeLevel'){
          let top = this.materialTypeInfo.parentMaterialTypeLevel;
          //将上级营销素材类型等级显示为汉字
          x.initialValue = this.levelMap[top];
        }else if(x.fieldName == 'materialTypeLevelName'){
          //将营销素材类型等级显示为汉字
          this.materialTypeLevel = this.materialTypeInfo.materialTypeLevel;
          x.initialValue = this.levelMap[this.materialTypeLevel];
        }else{
          x.initialValue = this.materialTypeInfo[x.fieldName];
        }

      });
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '上级营销素材类型编号',
          fieldName: 'parentMaterialTypeCode',
          readonly: true,
          placeholder: '',
          style: { width: '300px' }
        },
        {
          type: 'INPUT',
          label: '上级营销素材类型名称',
          fieldName: 'parentMaterialTypeName',
          readonly: true,
          placeholder: '',
          style: { width: '300px' }
        },
        {
          type: 'INPUT',
          label: '上级营销素材类型等级',
          placeholder: '',
          fieldName: 'parentMaterialTypeLevel',
          readonly: true,
          style: { width: '300px' }
        },
        {
          type: 'INPUT',
          label: '营销素材类编号',
          fieldName: 'materialTypeCode',
          placeholder: '',
          orgId: 'orgId',
          readonly: true,
          style: { width: '300px' }
        },
        {
          type: 'INPUT',
          label: '营销素材类型名称',
          fieldName: 'materialTypeName',
          placeholder: '',
          orgId: 'orgId',
          readonly: true,
          style: { width: '300px' }
        },
        {
          type: 'INPUT',
          label: '营销素材类型等级',
          fieldName: 'materialTypeLevelName',
          placeholder: '',
          readonly: true,
          style: { width: '300px' }
        },
        {
          type: 'SELECT',
          label: '可用状态',
          fieldName: 'isSend',
          placeholder: '请选择',
          itemList: this.createDictList('1003'),
          placeholder: '',
          style: { width: '300px' }
        },
        {
          type: 'TEXT_AREA',
          label: '营销素材类型描述',
          fieldName: 'materialTypeDesc',
          placeholder: '',
          readonly: true,
          style: { width: '300px' }
        }
      ];
    },
    //树节点
    handleNodeClick(data,res) {
      this.currentNode = res;
      this.treeLeval = res.level;
      let that = this;
      if (data != '' || data != 'undefined') {
        this.materialTypeInfo.children = data.children;
        this.materialTypeInfo.deleted = data.deleted;
        this.materialTypeInfo.isSend = data.isSend;
        this.materialTypeInfo.materialTypeCode = data.materialTypeCode;
        this.materialTypeInfo.materialTypeId = data.materialTypeId;
        this.materialTypeInfo.materialTypeLevel = data.materialTypeLevel;
        this.materialTypeInfo.materialTypeName = data.materialTypeName;
        this.materialTypeInfo.parent = data.parent;
        this.materialTypeInfo.parentMaterialTypeId = data.parentMaterialTypeId;
        this.materialTypeInfo.parentTypeId = data.parentTypeId;
        this.materialTypeInfo.text = data.text;
        this.materialTypeInfo.parentMaterialTypeCode = data.parentMaterialTypeCode;
        this.materialTypeInfo.parentMaterialTypeName = data.parentMaterialTypeName;
        this.materialTypeInfo.parentMaterialTypeLevel = data.parentMaterialTypeLevel;
        this.materialTypeInfo.materialTypeDesc = data.materialTypeDesc;
        this.initTab();
      } else {
        this.formList.forEach(ele => {
          ele.initialValue = '';
        });
        this.dataSource = [];
      }
    },
    //加载子节点数
     async loadTree(node, resolve){
        this.currentNode = node;
        this.currentResolve = resolve;
        //清空子节点
        this.currentNode.childNodes = [];
        let dt = { parentTypeId: null };
        if (node.level === 0) {
          dt = { parentTypeId: null };
        }else{
          dt = {parentTypeId:node.data.materialTypeId};
        }
        let td = await tree(dt)
        resolve(td.data);
    },
    //刷新节点
    refreshCurrentNode(){
      //this.loadTree(this.currentNode,this.currentResolve);
      let node1 = this.currentNode;
      node1.loaded = false;
      node1.expand();
    },
    updateCurrentNode(){
      let node1 = this.currentNode.parent;
      node1.loaded = false;
      node1.expand();
    }
  }
};
</script>

<style lang="less" scoped>
.Department {
  .btn {
    padding: 10px;
  }
  .submit {
    width: 100%;
    text-align: center;
    padding: 10px;
  }
  .DepartmentWrap { background: #fff;
    height: 79vh;
    border: 1px solid @borderColor;
    box-sizing: border-box;
    overflow: hidden;
    .leftTree {
      width: 36%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      float: left;
      padding: 10px;
      box-sizing: border-box;
    }

    .rightContent {
      width: 64%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      float: left;
      box-sizing: border-box;
      padding: 10px;
      border-left: 2px solid #eee;
    }
  }
}
</style>
